<template>
  <!-- 导航栏
      标签：van-nav-bar
                  标题:title
                  左边文本：left-text
                  右边文本:right-text
                  左边小箭头：left-arrow
                  左边点击:@click-left
                  右边点击:@click-right
      输入框
      标签  van-field
               label:左边标题
               v-model:值的双向绑定
               -->
  <!-- 按钮 -->
  <!-- 标签  van-button  -->
  <!-- 独占一行 block -->
  <!-- 圆角  round -->
  <!-- 蓝色  type='info'  -->
  <!-- 表单验证
        基本表单验证
          1: van-form组件将表单元素包起来
          2:表单元素的值要双向绑定
          3：van-field   :rules="表单验证的规则"
          rules=[
            {required:true,message:'请输入手机号',trigger:'onChange/onBlur'},
            {pattern：正则表达式,message:'错误信息',trigger:'onChange/onBlur'},
            {validator:(value)=>{return boolean值,true:验证通过,false:验证失败,message:'错误信息',trigger:'onChange/onBlur'}}
            ...
          ] -->
  <!-- ref作用： -->
  <!-- 1：获取原生标签dom -->
  <!-- 2:获取组件标签的实例对象   -->
  <!-- 组件标签   ref="xxx" -->
  <!-- van-form内它的methods内有一个方法叫validate,它是用于触发全局表单验证的，它返回的是一个promise,.then代表验证成功，.catch失败 -->

  <div class="login">
    <van-nav-bar title="登录"></van-nav-bar>
    <van-form ref="form">
      <van-field
        :rules="rules.mobile"
        v-model="form.mobile"
        label="手机号"
        placeholder="请输入手机号"
      ></van-field>
      <van-field
        :rules="rules.code"
        v-model="form.code"
        label="验证码"
        placeholder="请输入验证码"
      ></van-field>
    </van-form>
    <div class="btn">
      <van-button
        :loading="loading"
        loading-text="加载中..."
        block
        round
        type="info"
        @click="submit"
        >登录</van-button
      >
    </div>
  </div>
</template>
<script>
import { authorizations } from '@/api/login'
// import { setToken } from '@/utils/token.js'
export default {
  components: {},
  data () {
    return {
      loading: false,
      form: {
        mobile: '13115656565',
        code: '246810'
      },
      rules: {
        mobile: [
          { required: true, message: '必填', trigger: 'onBlur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'onChange'
          }
        ],
        code: [
          { required: true, message: '必填', trigger: 'onBlur' },
          {
            pattern: /^\d{6}$/,
            message: '请输入六位验证码',
            trigger: 'onChange'
          }
          // {
          //   validator: value => {
          //     // 只能是"246810"
          //     return value === '246810'
          //   },
          //   message: '验证码错误',
          //   trigger: 'onChange'
          // }
        ]
      }
    }
  },
  methods: {
    // 登录点击
    submit () {
      this.$refs.form
        .validate()
        .then(async () => {
          // console.log('验证通过')
          this.loading = true
          try {
            const res = await authorizations(this.form)
            // console.log('接口返回值', res)
            // 成功  this.$toast.success('成功提示')
            // 失败  this.$toast.fail('失败提示')
            // setToken(JSON.stringify(res.data.data))
            // localStorage.setItem('token', JSON.stringify(res.data.data))
            this.$store.commit('setToken', res.data.data)
            this.$toast.success('登录成功')
            // $route:当前的路由信息  $router:路由的实例化对象
            // console.log('route:', this.$route)
            // 跳转到首页
            // 有回跳地址就跳转到跳转地址，没有就跳转到首页
            this.$router.push(this.$route.query.back || '/')
          } catch (error) {
            // this.$toast.fail(error.response.data.message)
            // console.log('login:', error)
          } finally {
            this.loading = false
          }
        })
        .catch(() => {
          // console.log('验证失败')
        })
    }
  }
}
</script>
<style lang="less" scoped>
// scoped:只管当前组件和子组件最外层
// 希望管到子组件内部： ::v-deep ( >>>  /deep/)
.van-nav-bar {
  background-color: #1989fa;
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
}
.btn {
  padding: 10px 15px;
}
</style>
